// ...
$blue1: #a5b6c8;
$blue2: #535f6b;
$blue3: #30373f;
$blue4: #252a2e;
$blue5: #0e1113;
$yellow: #ff5402;
$yellow_hover: #f04e00;
$white: #fff;

$colorPrimary: #23c6c8;
$hoverPrimary: #23c6c8;
$colorSuccess: #5cb85c;
$hoverSuccess: #5cb85c;
$colorInfo: #32c5d2;
$hoverInfo: #32c5d2;
$colorWarning: #1c84c6;
$hoverWarning: #1c84c6;
$colorDanger: #ff3535;
$hoverDanger: #ff3535;

/**
*	h5ds平台3.0版本
*	z-index 10为单位递增
*	馒头 2015-05-14 加入
*/
/*格式化样式*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0; margin: 0; font-family:'微软雅黑'}
body{ overflow-x: hidden;-webkit-user-select:none; user-select:none;}
a{text-decoration:none; cursor:pointer; cursor:pointer; outline:none; color: #666666; transition: 0.3s;}
a:hover{ color: #03a9f4;}
table { border-spacing: 0;}
fieldset,img { border: 0;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal; font-style: normal;}
strong{	font-weight: bold;}
ol,ul {list-style: none; margin:0; padding:0;}
caption,th { text-align: left;}
h1,h2,h3,h4,h5,h6 { font-weight: normal; margin:0; padding:0;}
q:before,q:after { content:'';}
abbr,acronym { border: 0;}
textarea,input{outline:none;}
button{ border: none; outline:none;}

/*滚动条*/
/* Let's get this party started */
::-webkit-scrollbar { width:5px; height:5px;}
::-webkit-scrollbar-track {background:$blue4;}       
::-webkit-scrollbar-thumb {background:$blue5; border-radius: 100px;}
::-webkit-scrollbar-thumb:window-inactive {background:$blue5;}
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:increment{height:5px; width:5px;background:$blue4;}

input[type="color"]{ width:40px; height:20px;padding:0; border:none; vertical-align:middle;}
input[type="color"]::-webkit-color-swatch-wrapper { padding:0; border:none;}

/*清除浮动*/
.clear{ clear: both; display: block; font-size: 0; height: 0; line-height: 0; width:100%; }
.clearfix:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; }

.show{display:block!important;}
.hide{display:none!important;}

/* 帮助信息 */
.mt-helps{
	position: absolute;
	border: 3000px solid rgba(0, 0, 0, 0.7);
	z-index: 9999;
	transform: translate(-3000px, -3000px);
	transition: 0.3s;
	&:after{
		content: '';
		display: inline-block;
		height: 100%;
		width: 100%;
		border: 2px solid $yellow;
		box-sizing: border-box;
	}
	.mt-helps-content{
		padding: 20px;
		padding-top: 30px;
		width: 300px;
		min-height: 160px;
		position: absolute;
		background: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		.mt-helps-close{
			position: absolute;
			top: 10px;
			right: 10px;
		}
		&:before{
			content: '';
			display: inline-block;
			width: 0;
			height: 0;
			position: absolute;
			border: 10px solid transparent;
		}
		.mt-helps-prev,
		.mt-helps-end,
		.mt-helps-next{
			display: inline-block;
			padding: 4px 16px;
			background: $yellow;
			color: #fff;
			font-size: 14px;
			text-align: center;
			margin-left: 10px;
		}
		.mt-helps-prev{
			background: $blue1;
			color: $blue4;
		}
	}
	.mt-helps-info{
		height: 140px;
		overflow: auto;
		margin-bottom: 10px;
	}
	.mt-helps-btns{
		text-align: right;
	}
	.mt-helps-bottom{
		left: 50%;
		top: 100%;
		margin-top: 10px;
		transform: translateX(-50%);
		&:before{
			top: -20px;
			left: 50%;
			transform: translateX(-50%);
			border-bottom: 10px solid #fff;
		}
	}
	.mt-helps-right{
		left: 100%;
		top: 50%;
		margin-left: 10px;
		transform: translateY(-50%);
		&:before{
			left: -20px;
			top: 50%;
			transform: translateY(-50%);
			border-right: 10px solid #fff;
		}
	}
	.mt-helps-left{
		right: 100%;
		top: 50%;
		margin-right: 10px;
		transform: translateY(-50%);
		&:before{
			right: -20px;
			top: 50%;
			transform: translateY(-50%);
			border-left: 10px solid #fff;
		}
	}
}

/* loading */
.mt-loading{ color: $blue1; font-size: 12px; }
.mt-loading-window{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 4000; background: rgba(0,0,0,.3);}
.mt-loading-center{ font-size: 12px; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.mt-loading-center:before{ 
	content: ''; 
	display: inline-block; 
	width: 31px; 
	height: 31px; 
	background: url(../../images/loading.gif) no-repeat;
	margin-right: 10px;
	vertical-align: middle;
}

//输入框
.mt-input,.mt-textarea{ 
	width:75px; 
	height:20px;
	line-height:20px;
	border:none;
	text-align:center;
	background-color: $blue4;
	color: $blue1;
	font-size:12px;
	border-radius:2px;
}

.mt-textarea{
	width:auto;
	vertical-align: top;
}

.mt-color{
	display:inline-block;
	vertical-align:middle;
}
.mt-color-hidden[type="color"]{
	position: absolute;
	z-index: 2000;
	top: 0;
	left: 0;
	opacity: 0;
	height: 100%;
	width: 100%;
	cursor: pointer;
}

//搜索
.mt-input-search{
	width:305px;
	height:35px;
	background:#fff;
	border-radius:2px;
	input{
		width:265px;
		border:none;
		height:100%;
		color:$blue2;
		text-indent: 10px;
		float: left;
	}
	.mt-search-btn{
		display:inline-block;
		width:35px;
		height:35px;
		line-height:35px;
		text-align:center;
		color:$yellow;
		font-weight:bolder;
	}
}

//滑动杆
.mt-slider-bar{
	width:180px;
	height:3px;
	background: $blue4;
	position: relative;
	border-radius:2px;
	display:inline-block;
	.mt-slider-active{
		position:relative;
		height:100%;
		background:$yellow;
		.mt-slider-btn{
			position:absolute;
			right:-3px;
			top:-3px;
			width:9px;
			height:9px;
			border-radius:100px;
			background:$yellow;
			&:hover{
				right:-5px;
				top:-5px;
				width:13px;
				height:13px;
			}
		}
	}
}

//开关
.mt-switch{
	width:40px;
	height:20px;
	background:$blue2;
	border-radius:100px;
	position:relative;
	display:inline-block;
	.mt-switch-btn{
		position:absolute;
		border-radius:100px;
		width:18px;
		height:18px;
		background:$blue4;
		top:1px;
		left:1px;
	}

	&[data-val="on"]{
		background:$white;
		.mt-switch-btn{
			background:$yellow;
			left:21px;
		}
	}
}

//黄色按钮
.mt-btn-yellow{
	padding:3px 10px 5px 10px;
	display:inline-block;
	color:$white;
	background:$yellow;
	border-radius: 2px;
	font-size:16px;
	&:hover{
		color:#fff;
		background:$yellow_hover;
	}
}

//图标
@mixin beforeIcon($code){
	font-family: "iconfont" !important;
	content:$code;
	display:inline-block;
	width:12px;
	height:12px;
	color:$blue1;
	font-size:14px;
	position:absolute;
	right:8px;
	top:50%;
	line-height:12px;
	text-align:center;
	margin-top: -6px;
}

//选择
.mt-select{
	display:inline-block;
	position:relative;
	border-radius:2px;
	height:20px;
	background-color:$blue4;
	vertical-align:middle;
	&:before{
		@include beforeIcon("\e61b");
	}
	select{
		float: left;
		position: relative;
		z-index:10;
		width:100%;
		height:100%;
		border:none;
		background-color: transparent;
		color: $blue1;
		outline:none;
		font-size:12px;
		-webkit-appearance:none;
		padding:0 20px 0 5px;
		cursor:pointer;
		font-family:'微软雅黑';
		& option{
			color:$blue4;
			background:$blue1;
			font-size:12px;
		}
		& option:hover{
			color:#fff;
		}
	}
}

//自定义选择
.mt-select-diy{
	display:inline-block;
	position:relative;
	padding:0 30px 0 10px;
	background-color: $blue4;
	color: $blue1;
	line-height:28px;
	font-size:12px;
	cursor:pointer;
	&:before{
		@include beforeIcon("\e61b");
	}
	.mt-select-body{
		position: absolute;
		background: $blue4;
		left: 0;
		min-width: 100%;
		display: none;
	}
}

// 标题
.mt-title{
	position: absolute;
	z-index:2000;
	background: #000;
	color:$blue1;
	padding: 4px;
	font-size: 12px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	&:before{
		display: inline-block;
		position: absolute;
		content: '';
		border: 5px solid transparent;
  		border-bottom: 5px solid #000;
  		top: -10px;
	}
}
.mt-title-animated{
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

//更多
.mt-more{
	display:inline-block;
	height:14px;
	line-height:10px;
	padding:0 3px;
	background:$yellow;
	color:$white;
	border-radius:2px;
	font-size:12px;
}

//Tip
@mixin tip{
	z-index: 2000;
	line-height:30px;
	font-size: 12px;
	text-align:center;
	padding: 5px 30px;
	display: inline-block;
	margin-top: 10px;
	border-radius: 2px;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	color: #fff;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
}
.mt-tip-group{
	width: 100%;
	height: 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3000;
	text-align: center;
}
.mt-tip-inner{
	pointer-events: none;
}
.mt-tip-success{
	background:$colorSuccess;
	@include tip;
}
.mt-tip-warning{
	background:$colorWarning;
	@include tip;
}
.mt-tip-danger{
	background:$colorDanger;
	@include tip;
}

//分页
.mt-pagelist{
	$phei : 26px;
	position:relative;
	display:inline-block;
	li{
		float:left;
		margin-right:2px;
		display:inline-block;
		a{
			color:$blue1;
			display:inline-block;
			height:$phei;
			line-height:$phei;
			background:$blue4;
			padding:0 8px;
			font-size: 12px;
			&:hover{
				background:$blue5;
			}
		}
		.mt-active{
			background:$yellow;
			color:$white;
			&:hover{
				background:$yellow;
				color:$white;
			}
		}
		// .mt-pagelist-prev,
		// .mt-pagelist-next{
		// 	// ...
		// }
		.iconfont{
			font-size:12px;
			line-height:30px;
		}
	}
}

//tab
.mt-tab{
	box-sizing: border-box;
	&:after{
		content: ""; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}
	.mt-tab-header{
		background: $blue2;
		ul{
			&:after{
				content: ""; 
				display: block; 
				height: 0; 
				clear: both; 
				visibility: hidden;
			}
		}
		li{
			display: inline-block;
			cursor: pointer;
			float: left;
		}
		.mt-active{
			background: $blue3;
			color: $white;
		}
	}
	.mt-tab-body{
		float: left;
		width: 100%;
		&:after{
			content: ""; 
			display: block; 
			height: 0; 
			clear: both; 
			visibility: hidden;
		}
		.mt-tab-box{
			display: none;
		}
		.mt-active{
			display: block;
		}
	}
}

.mt-tab-style1{
	.mt-tab-header{
		line-height: 30px;
		li{
			font-size: 12px;
			padding: 0 10px;
			color: $blue3;
		}
	}
}

.mt-tab-style2{
	.mt-tab-header{
		line-height: 30px;
		background: $blue3;
		position:relative;
		ul{
			position:relative;
			z-index: 100;
		}
		li{
			font-size: 14px;
			padding: 0 10px;
			color: $blue3;
			border-bottom: 4px solid $blue4;
			color: $blue1;
		}
		.mt-active{
			border-color: $yellow;
			color: $blue1;
		}
		&:after{
			display: block;
			content: '';
			position:absolute;
			bottom:0;
			background:$blue4;
			height: 4px;
			width: 100%;
		}
	}
}

//可拖动框
.mt-drag{
	position:absolute;
	z-index: 1000;
}

//拖动排序
.mt-uniqlist{
	position:relative;
	.mt-active{
		background:$yellow;
		border:1px solid $yellow;
	}
	li{
		position:relative;
		background:$blue4;
		margin-bottom: 10px;
		a{
			display: inline-block;
			cursor: move;
			color:$white;
		}
	}
	.mt-uniq-start{
		z-index: 1000;
		opacity: 0.3;
	}
	.mt-uniq-clone{
		z-index: 1000;
	}
}

@mixin control($size: 10px, $margin: -6px){
	position:absolute;
	z-index: 1000;
	width:100%;
	height:100%;
	cursor:move;
	border:1px dashed $yellow;
	margin:-1px 0 0 -1px;
	top:0;
	left:0;
	span{
		display: inline-block;
		position:absolute;
		background:$blue3;
		width: $size;
		height: $size;
		border:1px solid $yellow;
		cursor: pointer;
	}
	.mt-control-center{
		top: 50%;
		left:50%;
		border:none;
		width: 0px;
		height: 0px;
	}
	.mt-control-top{
		top: $margin;
		left: 50%;
		margin-left: $margin;
		cursor: n-resize;
	}
	.mt-control-bottom{
		bottom: $margin;
		left: 50%;
		margin-left: $margin;
		cursor: n-resize;
	}
	.mt-control-left{
		top: 50%;
		left: $margin;
		margin-top: $margin;
		cursor: e-resize;
	}
	.mt-control-right{
		top: 50%;
		right: $margin;
		margin-top: $margin;
		cursor: e-resize;
	}
	.mt-control-topleft{
		top:$margin;
		left:$margin;
		cursor: se-resize;
	}
	.mt-control-topright{
		top:$margin;
		right:$margin;
		cursor: ne-resize;
	}
	.mt-control-bottomleft{
		bottom:$margin;
		left:$margin;
		cursor: ne-resize;
	}
	.mt-control-bottomright{
		bottom:$margin;
		right:$margin;
		cursor: nw-resize;
	}
	.mt-control-rotate{
		border-radius:100px;
		top: -30px;
		left: 50%;
		margin-left: $margin;
		cursor: -webkit-grabbing;
	}
}

//控制杆
.mt-control{
	@include control(10px,-6px)
}

//裁剪
.mt-crop-control{
	@include control(6px,-4px)	
}
.mt-crop-controlbox{
	$borderWidth : 500px; //图片剪切使用
	display:none;
	width:100px;
	height:60px;
	position:absolute;
	margin: 1px 0 0 1px;
	top:100px - $borderWidth;
	left:100px - $borderWidth;
	border:$borderWidth solid rgba(0,0,0,0.5);
}
.mt-crop{
	width:323px;
	height: 248px;
	font-size:12px;
	position:relative;
	padding-bottom:30px;
	.mt-crop-bg{
		background:$blue5;
		text-align: center;
		height: 218px;
		width: 100%;
	}
	.mt-crop-fun{
		background:$blue4;
		a{
			display: inline-block;
			width: 20%;
			text-align: center;
			&:hover{
				background:$blue5;
			}
		}
	}
	.mt-crop-box{
		display: inline-block;
		width: 100%;
		height: 100%;
		position:relative;
		overflow: hidden;
		img{
			max-height: 100%;
			max-width: 100%;
			display: inline-block;
			position:relative;
		}
		.mt-crop-controlbox{
			z-index: 100;
		}
	}
	.mt-crop-fun{
		height: 30px;
		line-height: 30px;
	}
	.mt-crop-btns{
		height: 30px;
		line-height: 30px;
		a{
			display: inline-block;
			text-align: center;
			width: 25%;
			font-size: 14px;
			color: $blue1;
			&:hover{
				background:$blue4;
			}
		}
	}
}

//上传按钮
.mt-upload-btn{
	position:relative;
}
.mt-upload-input{
	position:absolute;
	z-index:10;
	width:100%;
	height:100%;
	top:0;
	left:0;
	opacity:0;
}

// 弹窗 - 弹窗都是2000 + 
.mt-modal,.mt-confirm{
	$titleHei: 45px;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 2900;
	display: none;
	.mt-modal-box{
		background: $blue3;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		box-shadow: 0 0 10px rgba(0,0,0,0.5);
	}
	.mt-modal-close{
		color: $yellow;
		height: 17px;
		font-weight: bolder;
		position: absolute;
		top: 15px;
		right: 10px;
		line-height: 10px;
		z-index: 1000;
		.iconfont{
			float: left;
			line-height: normal;
		}
	}
	.mt-modal-title{
		color: #fff;
		height: $titleHei;
		text-align: center;
		line-height: $titleHei;
	}
	.mt-modal-full,
	.mt-modal-content{
		position: absolute;
		top: $titleHei;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: auto;
	}
	.mt-modal-full{
		top: 0;
	}
}
.mt-confirm{
	.mt-modal-box{
		width: 300px;
	}
	.mt-modal-content{
		position: initial;
		padding: 10px 20px;
		color: $blue1;
	}
	.mt-modal-btns{
		padding: 10px 10px 10px 10px;
		text-align: center;
	}
}
.mt-btn-cancel,.mt-btn-ok{
	display: inline-block;
	padding: 4px 30px;
	background: $yellow;
	color: #fff;
	margin: 5px 10px;
	&:hover{
		color: #fff;
	}
}
.mt-btn-cancel{
	background: $blue2;
}
.mt-modal-bg{
	display: none;
	position: fixed;
	z-index: 2000;
	background: rgba(0, 0, 0, 0.4);
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.mt-contextmenu{
	position: absolute;
	z-index: 3000;
	background: $blue4;
	color: $blue1;
	padding: 10px;
	font-size: 12px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	.iconfont{
		font-size: 14px; 
	}
	li{
		width: 100px;
		padding: 4px;
		cursor: pointer;
		&:hover{
			background: $yellow;
			color: #fff;
		}
	}
}

// 复选框
.mt-checkbox-group{
	display: inline-block;
}
.mt-checkbox-item{
	display: inline-block;
	font-size: 13px;
	padding: 5px 15px;
	color: $blue4;
	background: $blue1;
	cursor: pointer;
}
.mt-checkbox-active{
	background: $yellow;
	color: #fff;
}